<template>
	<view scroll-with-animation scroll-y style="height: 100%;position: relative;background-color: #F6FAFA;">
		<view
			style="width: 100%;background-color: #FFFFFF;height: 179rpx;display: flex;flex-direction: column;align-items: center;justify-content: space-around;">
			<view
				style="width: 90%;height: 80rpx;background: #F7F7F7;border-radius: 40rpx;display: flex;align-items: center;justify-content: space-around;" @click="toSeach">
				<icon type="search" size="18"/>
				<input class="uni-input" placeholder="搜索医生、科室、疾病" style="width: 80%;" />
			</view>
			<view style="display: flex;align-items: center;width: 90%;justify-content: flex-start;">
				<view @click="showWin">{{ baseDeptName }}</view>
				<image style="height: 32rpx;margin-right: 40rpx;transform:rotate(180deg);" mode="heightFix" 
					src="../../static/images/topjt.png" :style="{
						'transform': winState?'rotate(0deg)':'rotate(180deg)'
					}" @click="showWin">
				</image>
				<!-- <view>选择职称</view>
				<image style="height: 32rpx;margin-right: 40rpx;" mode="heightFix" src="../../static/images/topjt.png">
				</image> -->
			</view>
		</view>
		<view class="list pl25 pr25" style="text-align: center;background-color: #F6FAFA;padding-top: 10rpx;">
			<view v-for="(item,index) in docList" :key="index" @click="getDocInfo(item.id,item.recNum)"
				style="border: 1px solid #F2F9F9;box-shadow: 0px 1px 17px 1px rgba(162, 215, 211, 0.16);border-radius: 32rpx;background-color: #FFFFFF;margin-top: 20rpx;">
				<view class="flex" style="padding-left: 20rpx;box-sizing: border-box;padding-right: 25rpx;">
					<view class="rela head">
						<image :src="item.photo"></image>
						<view class="w100 abs texts ftc cfff" v-if="item.onlineState==8"><text class="text3" style="background: rgba(87, 66, 43, 1)">接诊</text></view>
						<view class="w100 abs texts ftc cfff" v-if="item.onlineState==0"><text class="text3">离线</text></view>
						<view class="w100 abs texts ftc cfff" v-if="item.onlineState==7"><text class="text3" style="background: rgba(240, 224, 197, 1);">休息</text></view>
						<view class="w100 abs texts ftc cfff" v-if="item.onlineState==6"><text class="text3">离开</text></view>
					</view>
					<view class="it1 pl30">
						<view class="flex flex-ac info">
							<!-- <text class="ft16 c000 bold">{{item.name}}</text>
							<view class="ml30 two">{{item.deptName}}</view>
							<text class="ml30" three>{{item.title}}</text> -->
							<view class="">{{item.name}}</view>
							<view class="">{{item.deptName}}</view>
							<view class="">{{item.title}}</view>
						</view>
						<view class="lineText mt20" style="text-align: left;">擅长：{{item.disease}}</view>
						<view class="mt25 flex flex-ac flex-pc">
							<view class="it1 flex flex-ac doctor">
								<view class="doctorv" v-if="item.ismessage==1" style="display: flex;align-items: center;">
									<image src="../../static/images/tuwen.png" style="width: 50rpx;" mode="widthFix"></image>
									<text style="color: rgba(87, 66, 43, 1)">¥{{' '+item.messagefee}}</text>
								</view>
								<view class="doctorv" v-if="item.ismessage==0" style="display: flex;align-items: center;">
									<image src="../../static/images/wkttw.png" style="width: 50rpx;" mode="widthFix"></image>
									<text style="color: rgba(87, 66, 43, 1);">未开通</text>
								</view>
								<view class="doctorv" v-if="item.isvideo==1" style="display: flex;align-items: center;">
									<image src="../../static/images/wkttw.png" style="width: 50rpx;" mode="widthFix"></image>
									<text style="color: rgba(87, 66, 43, 1)">¥{{' '+item.videofee}}</text>
								</view>
								<view class="doctorv" v-if="item.isvideo==0" style="display: flex;align-items: center;">
									<image src="../../static/images/wktsp.png" style="width: 50rpx;" mode="widthFix"></image>
									<text style="color: rgba(87, 66, 43, 1);">未开通</text>
								</view>
							</view>
							<!--  -->
						</view>
					</view>
				</view>
				<view style="display: flex;justify-content: center;margin-top: 40rpx;">
					<view
						style="width: 90%;border-top: 2rpx solid #E6EAEA;padding-top: 20rpx;display: flex;align-items: center;justify-content: space-around;">
						<view>已服务：<text style="color: rgba(246, 189, 77, 1)">{{item.recNum}}人</text></view>
						<view>接诊率：<text style="color: rgba(246, 189, 77, 1)">100%</text></view>
						<view>平均回复：<text style="color: rgba(246, 189, 77, 1)">1小时</text></view>
					</view>
				</view>
			</view>
			<uni-load-more :status="message" :contentText="contentText" @clickLoadMore="loadMore"></uni-load-more>
		</view>
		<view style="position: fixed;bottom: 15%;right: 20rpx;
			width: 120rpx;height: 120rpx;background: linear-gradient(0deg, #AA8562, rgba(87, 61, 34, 1));
			box-shadow: 0px 0px 22rpx 2rpx rgba(87, 66, 43, 1);border-radius: 50%;
			display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 999;"
			@click="tohome">
			<image src="../../static/images/sy@2x.png" style="width: 50%;" mode="widthFix"></image>
			<view style="color: #FFFFFF;">首页</view>
		</view>
		
		<!-- 弹窗 -->
		<view class="win flex" v-if="winState" @touchmove.stop="defaultEvent" :animation="animationData">
			<scroll-view class="it1 pl30 pr30 box ftc" scroll-with-animation scroll-y>
				<view :class="baseDeptId == -1?'active':''" @click.stop="hideWin" @click="getDocList">全部科室</view>
				<view v-for="(deptItem,deptIdx) in deptList" :key="deptIdx"
					:class="baseParDeptId == deptItem.id?'active':''" @click="getSecondLevelDepartment(deptItem.id)">
					{{deptItem.name}}
					<!-- <view style="width: 90;">erji</view> -->
				</view>
				
			</scroll-view>
			<view class="it1"  @click.stop="hideWin" style="position: relative;">
				<view style="background-color: #FFFFFF;width: 90%;position: absolute;top: 90rpx;left: 0rpx;border-left:2rpx solid #EFEFEF;" v-if="winStateIn">

						<scroll-view class="it1" scroll-with-animation scroll-y style="max-height: 1000rpx;">
						<view v-for="(secondItem,secondIdx) in secondDept" :key="secondIdx" @click.stop="hideWin" @click="getDocInfoBydeptId(secondItem.id,secondItem.name)"
							style="display: flex;align-items: center;justify-content: center;border-bottom: 2rpx solid #EFEFEF;height: 90rpx;width: 100%;">
								{{secondItem.name}}
						</view>
						</scroll-view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseDeptName: '全部科室',
				baseDeptId: -1,
				baseParDeptId: -1,
				winState:false,
				winStateIn:false,
				animationData: null,
				wx: "https://app.mzmzb.com",
				current: 1,
				deptCurrent: 1,
				hasNextPage: true, //是否有下一页
				message: 'more',
				allDocList: [],
				deptDocList:[],
				deptList:[],
				secondDept:[],
				docList: [],
				usrUserId: 0,
				contentText: {
					contentdown: "点击显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			};
		},
		onLoad(option) {
			
			let _this = this;
			if(option && option.deptId){
				this.baseDeptId = option.deptId
				this.baseDeptName = option.deptName
				this.getDocInfoBydeptId(this.baseDeptId,this.baseDeptName)
			}else{
				this.getDocList();
			}
			this.getDeptList();
			//初始化一个动画
			var animation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease',
			})
			this.animation = animation;
			// 定义动画内容
			this.animation.translateX(_this.windowWidth).step()
			// 导出动画数据传递给data层
			this.animationData = this.animation.export();
			this.usrUserId = uni.getStorageSync("usrUserId");
		},
		methods: {
			getDeptList() {
				this.func.$request('wx/getHspDeptList.tz',{hspId: this.hspId},'GET').then(res=>{
					if (res.data.success = true) {
						let deptList = res.data.result
						if(deptList && deptList.length>0){
							this.deptList = deptList
						}
					}
				})
			},
			toSeach() {
				var that = this;
				uni.navigateTo({
					url: '/pages/search/index?usrUserId=' + that.usrUserId
				})
			},
			defaultEvent() {
			
			},
			showWin() {
				this.winState = true;
				setTimeout(() => {
					let animation = this.animation;
					// 定义动画内容
					animation.translateX(0).step()
					// 导出动画数据传递给data层
					this.animationData = animation.export()
				}, 200)
			},
			hideWin() {
				let animation = this.animation;
				// 定义动画内容
				animation.translateX(this.windowWidth).step()
				// 导出动画数据传递给data层
				this.animationData = animation.export()
				setTimeout(() => {
					this.winState = false;
					this.winStateIn = false;
				}, 500)
			},
			tohome(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			//跳转医生详情页
			getDocInfo(id, recNum) {
				var that = this;
				var docId = id;
				var recNum = recNum
				uni.navigateTo({
					url: '/pages4/doctor/index?docId=' + docId + '&usrUserId=' + that.usrUserId + '&recNum=' + recNum
				});
			},
			//获取医生列表
			getDocList() {
				var that = this
				// this.baseDeptId = -1
				this.baseDeptName = '全部科室',

				that.func.$request('doctor/doctorlist.tz',{hospitalId: this.hspId,current: this.current},'GET').then(res=>{
					if (res.data.success = true) {
						this.hasNextPage = res.data.result.hasNextPage;
						if (this.hasNextPage) {
							this.message = 'more';
						} else {
							this.message = 'noMore';
						}
						if (res.data.result.list.length > 0) {
							res.data.result.list.forEach((item, index)=>{
								this.allDocList.push(item);
							});
						}
						var uniques = [];
						var stringify = {};
						for (var i = 0; i < this.allDocList.length; i++) {
							var keys = Object.keys(this.allDocList[i]);
							keys.sort(function(a, b) {
								return (Number(a) - Number(b));
							});
						 var str = '';
							for (var j = 0; j < keys.length; j++) {
								str += JSON.stringify(keys[j]);
								str += JSON.stringify(this.allDocList[i][keys[j]]);
							}
							if (!stringify.hasOwnProperty(str)) {
								uniques.push(this.allDocList[i]);
								stringify[str] = true;
							}
						}
						this.docList = uniques
					} else {
						this.message = 'noMore';
					}
				})
				
			},
			//加载更多
			loadMore(e) {
				if (e.detail.status == 'more') {
					this.message = 'loading';
					this.current = this.current + 1;
					setTimeout(() => {
						this.getDocList()
						if (this.hasNextPage) {
							this.message = 'more';
						} else {
							this.message = 'noMore';
						}
					}, 500);
				}
			},
			getSecondLevelDepartment(id){
				this.baseParDeptId = id
				this.baseDeptId = id
				let data={
					baseDeptId: id,
					limit:0
				}
				this.func.$request('baseDept/getSecondLevelDepartment.tz',data,'GET').then(res=>{
					if (res.data.success = true) {
						this.secondDept = res.data.result.list
						this.winStateIn = true
					}
				})
			},
			//点击科室获取医生列表
			getDocInfoBydeptId(id,name) {
				var that = this
				console.log(id);
				var storDeptId=uni.getStorageSync("baseDeptId")
				if(storDeptId!=id){
					that.deptCurrent=1
				}
				console.log("页数:"+that.deptCurrent)
				that.baseDeptId = id;
				this.baseDeptName = name
				uni.setStorageSync("baseDeptId",that.baseDeptId)
				let data={
					hospitalId: this.hspId,
					baseDeptId: that.baseDeptId,
					current: that.deptCurrent
				}
				this.func.$request('doctor/doctorlist.tz',data,'GET').then(res=>{
					if (res.data.success = true) {
						console.log(res.data)
						that.hasNextPage = res.data.result.hasNextPage;
						if(that.hasNextPage){
							that.message = 'more';
						}else{
							that.message = 'noMore';
						}
						res.data.result.list.forEach(function(item,index){
							that.deptDocList.push(item);
						});
						that.docList = JSON.parse(JSON.stringify(res.data.result.list));
					}else{
						that.message = 'noMore';
					}
				})
				
			}
		},
	
	};
</script>

<style lang="less">
	.info{
		:nth-child(1){
			font-size: 30rpx;
			font-weight: 600;
				width:20%;
		}
		:nth-child(2){
				width:35%;	
		}
		:nth-child(3){
				width:35%;
		}
		display: flex;
		justify-content:space-between;
		text-align:left;
		view{
		
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.list>view {
		padding: 40rpx 0;
		border-top: 1rpx solid #efefef;
	
		.doctor {
			color: #74a6fd;
	
			.doctorv {
				width: 150rpx;
	
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	
	.list .head {
		height: 140rpx;
	
		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
		}
	
		.texts {
			height: 32rpx;
			bottom: -4rpx;
	
			text {
				display: inline-block;
				height: 32rpx;
				line-height: 32rpx;
				border-radius: 16rpx;
				background: #74a6fd;
				font-size: 22rpx;
				padding: 0 15rpx;
			}
	
			.text1 {
				background: #ff0000;
			}
			
			.text3 {
				background: #999999;
			}
	
			.text2 {
				background: #fec322;
			}
		}
	}
	.win {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 20;
		background: rgba(0, 0, 0, 0.3);
	
		scroll-view {
			height: 100vh;
			background: #fff;
	
			view {
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1rpx solid #EFEFEF;
				position: relative;
			}
	
			view.active::after {
				position: absolute;
				content: '';
				width: 65rpx;
				height: 10rpx;
				background: #74a6fd;
				left: 50%;
				margin-left: -32rpx;
				top: 65%;
			}
		}
	}
	
</style>
